<!--
 * @Author: your name
 * @Date: 2020-10-22 14:10:28
 * @LastEditTime: 2021-02-22 17:27:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\sunglasses\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem"/>
    <banner :bannerImg="require('~/assets/image/Product-list_03.jpg')" h_height="300px"/>
    <filter-item :optionData="optionData" @checkedOptions="checkedOptions" class="filter-item"/>
    <product-list :productData="productData" @loadMoreData="loadMoreData" class="mb50"/>
  </div>
</template>

<script>
import ProductList from '~/components/common/ProductList';
import BreadCrumb from '~/components/common/Breadcrumb';
import Banner from '~/components/common/Banner';
import FilterItem from '~/components/common/FilterItem';
import { spliteParams } from '~/utils/Utils';
export default {
  name: 'buyOneGetOneFree',
  async asyncData({req, params, query, route}) {
    let arr = await spliteParams(route.fullPath);
    return {
      productData:[
        {
          id: 1,
          baseUrl: require('~/assets/image/1_7.jpg'),
          imgs: [
            { url: require('~/assets/image/1_7.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 2,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg')},
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 3,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        },
        {
          id: 4,
          imgs: [
            { url: require('~/assets/image/1_1_.jpg') },
            { url: require('~/assets/image/1_1__1.jpeg') },
            { url: require('~/assets/image/1_1__1_1.jpeg') },
          ],
          finalPrice: '89',
          name: 'FANKEN',
          price: '89',
          options: [
            {
              id: '1',
              img: require('~/assets/image/8051-1.png'),
              title: 'blank'
            },
            {
              id: '2',
              img: require('~/assets/image/8051-2.png'),
              title: 'gray'
            },
            {
              id: '3',
              img: require('~/assets/image/8051-3.png'),
              title: 'white'
            },
          ]
        }
      ],
      optionData: [
        {
        code: "custom_color",
        label: "Color",
        options: [
            {
            id: "84",
            label: "Black",
            src: require('~/assets/image/Black.png'),
            },
            {
            id: "85",
            label: "Gray",
            src: require('~/assets/image/Gray.png'),
            },
            {
            id: "86",
            label: "Orange",
            src: require('~/assets/image/Orange.png'),
            },
        ],
        },
        {
        code: "gender",
        label: "Gender",
        options: [
            {
            label: "Men",
            src: require('~/assets/image/Men.png'),
            id: "53",
            },
            {
            id: "54",
            label: "Women",
            src: require('~/assets/image/Women.png'),
            },
        ],
        },
        {
        code: "material",
        label: "Material",
        options: [{
            id: "52",
            label: "Metal",
            src: require('~/assets/image/Metal.png')
        }]
        },
        {
        code: "shape",
        label: "Shape",
        options: [
            {
            id: "71",
            label: "Cat eye",
            src: require('~/assets/image/Cat eye.png')
            },
            {
            id: "69",
            label: "Rectangle",
            src: require('~/assets/image/Rectangle.png')
            },
            {
            id: "70",
            label: "Round",
            src: require('~/assets/image/Round.png')
            }
        ]
        },
        {
        code: "fit",
        label: "Fit",
        options: [{
            id: "73",
            label: "Medium",
            src: require("~/assets/image/Medium.png")
        }]
        },
        {
        code: "feature",
        label: "Feature",
        options: [
            {
            id: "82",
            label: "Lightweight",
            src: require("~/assets/image/Lightweight.png")
            }
        ]
        }
      ],
      breadcrumbTtem: arr || []
    }
  },
    components: {
      ProductList,
      BreadCrumb,
      Banner,
      FilterItem
    },
    methods: {
      checkedOptions (option) {
        console.log('option :>> ', option);
      }
      ,loadMoreData(curPage) {
        console.log('curPage :>> ', curPage);
      }
    },
    watch: {
        $route(to, from) {
            if(to.fullPath !== from.fullPath) {
                this.breadcrumbTtem = spliteParams(to.fullPath);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
</style>